<template>
	<view class="article">
		<u-notify ref="uNotify" message=""></u-notify>
		<template>
			<view class="article-title">{{contentsdata.title}}</view>
			<uni-list :border="false">
				<uni-list-item thumbSize="lg" :thumb="createdUsers.photo">
					<!-- 通过body插槽定义作者信息内容 -->
					<template v-slot:body>
						<view class="header-content">
							<view class="uni-title">{{createdUsers.name}}</view>
							<view class="uni-note">更新于 {{contentsdata.createdtime}} </view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<!-- 			<view class="banner">
				文章开头，缩略图 
				<image class="banner-img" src="https://file.femacise.cn//230408/6473268058128901.webp" mode="aspectFill"></image>
				文章摘要
				<view class="banner-title">
					<text class="uni-ellipsis">文章摘要</text>
				</view>
			</view> -->
			<view class="article-content">
				<u-parse :content="contentsdata.content"></u-parse>
				<!-- <rich-text :nodes="contentsdata.content" style="font-size: 14px;line-height: 1.8;color:#333"></rich-text> -->
			</view>

		</template>
		<view>
			<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'"
				:cmData="commentData" v-if="commentData"></hb-comment>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {
		getContentsDataByIdApi
	} from '@/api/contents.js'
	import {
		createdCommentApi,
		getCommentApi,
		leadingDisableApi
	} from '@/api/comment.js'
	import {
		IsLogin
	} from '@/common/Token.js'
	import {
		dataForma
	} from '@/common/DateForma.js'
	import {
		listToTree,
		findNodeFromTreeById
	} from '@/common/TreeTools.js'
	export default {
		name: 'NewsDetail',
		data() {
			//滚动坐标 返回顶部用到
			const scrollTop = 0
			const contentsid = ''
			const contentsdata = {}
			const createdUsers = {}
			//评论数据
			const commentData = {
				//阅读数
				readNumer: 0,
				//评论条数
				commentSize: 0,
				comment: []
			}
			//是否登录
			const islogin = false
			//评论数据
			const contentsforminfo = {
				contentsid: 0,
				parentid: 0,
				content: ''
			}
			return {
				scrollTop,
				contentsid,
				contentsdata,
				createdUsers,
				commentData,
				islogin,
				contentsforminfo
			}
		},
		 computed: {
		    commentTotal() {
		      return this.commentData.comment.length;
		    }
		  },
		methods: {
			//获取文章数据
			getContentsDataById() {
				getContentsDataByIdApi(this.contentsid).then(res => {
					if (res.code === 1) {
						this.contentsdata = res.data
						this.createdUsers = res.data.createdUsers
					} else {
						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							message: res.msg,
							safeAreaInsetTop: false
						})
					}
				})
			},
			add(e) {
				this.contentsforminfo.contentsid = this.contentsid
				if (e.pId === null) {
					this.contentsforminfo.parentid = 0
				} else {
					this.contentsforminfo.parentid = e.pId
				}
				this.contentsforminfo.content = e.content

				createdCommentApi(this.contentsforminfo).then(res => {
					if (res.code === 1) {
						//本地添加评论数据
						const info = {
							id: res.data.id,
							owner: true,
							hasLike: false,
							likeNum: 0,
							avatarUrl: this.$store.getters.getUserInfo.userphoto,
							nickName: this.$store.getters.getUserInfo.username,
							content: this.contentsforminfo.content,
							parentId: null,
							createTime: dataForma(new Date(), "yyyy-MM-dd HH:mm:ss")
						}
						//当没有上级评论
						if (this.contentsforminfo.parentid === 0) {
							info.parentId = null
							this.commentData.comment.push(info)
						} else {
							info.parentId = this.contentsforminfo.parentid
							const temp = this.commentData.comment.find(m => m.id === info.parentId)
							if (temp.children) {
								temp.children.push(info)
							} else {
								temp.children = []
								temp.children.push(info)
							}
						}
						this.$refs.hbComment.addComplete()
						this.commentData.commentSize++
						this.$refs.uNotify.show({
							top: 10,
							type: 'success',
							message: '评论成功',
							safeAreaInsetTop: false
						})

					} else {
						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							message: res.msg,
							safeAreaInsetTop: false
						})
					}
				})

			},
			del(e) {
				const temp = findNodeFromTreeById(this.commentData.comment, e)
				leadingDisableApi(e).then(res => {
					if (res.code === 1) {
						//删除本地数据
						if (temp.parentId === 0 || temp.parentId === null) {
							//获取数组索引
							const index = this.commentData.comment.findIndex(item => item.id === temp.id)
							if(typeof(temp.children) == "undefined"){
								this.commentData.commentSize--
							}
							else{
								this.commentData.commentSize = this.commentData.commentSize -1 -temp.children.length
							}
							this.commentData.comment.splice(index, 1);
						} else {
							//获取父级数据
							const parentdata = this.commentData.comment.find(m => m.id === temp.parentId)
							//获取数组索引
							const index = parentdata.children.findIndex(item => item.id === temp.id)
							this.commentData.commentSize--
							parentdata.children.splice(index, 1)							
						}
						
						this.$refs.uNotify.show({
							top: 10,
							type: 'success',
							message: '删除成功',
							safeAreaInsetTop: false
						})

					} else {
						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							message: res.msg,
							safeAreaInsetTop: false
						})
					}
				})

			},
			like() {

			},
			focusOn() {
				if (!this.islogin) {
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						message: '需要登录才能评论',
						safeAreaInsetTop: false
					})
					this.$refs.hbComment.addComplete()
				}
			},
			//获取评论数据
			getComment() {
				getCommentApi(this.contentsid).then(res => {
					if (res.code === 1) {
						this.commentData.commentSize = res.data.commentList.length
						this.commentData.comment = listToTree(res.data.commentList)
					}
				})
			},
			// 发送给朋友
			onShareAppMessage() {
				return {
					title: this.contentsdata.title, // 标题
					path: '/pages/newsdetail/newsdetail?id='+this.contentsid, // 要分享的页面
					imageUrl: this.contentsdata.photo // 分享时的图片
				}
			},
			// 分享到朋友圈
			onShareTimeline() {
				return {
					title: this.contentsdata.title,
					path: '/pages/newsdetail/newsdetail?id='+this.contentsid,
					imageUrl: this.contentsdata.photo
				}
			}
		},
		created() {

		},
		//监控滚动坐标
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			this.contentsid = option.id
			this.getContentsDataById()
			this.getComment()
		},
		onShow() {
			//判断用户是否登录
			if (IsLogin()) {
				this.islogin = true
			} else {
				this.islogin = false
			}
		}
	}
</script>

<style>
	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.footer-button {
		display: flex;
		align-items: center;
		font-size: 12px;
		height: 30px;
		color: #fff;
		background-color: #ff5a5f;
	}

	.banner {
		position: relative;
		margin: 0 15px;
		height: 180px;
		overflow: hidden;
	}

	.banner-img {
		position: absolute;
		width: 100%;
	}

	.banner-title {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 15px;
		width: 100%;
		bottom: 0;
		height: 30px;
		font-size: 14px;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.article-title {
		font-weight: bold;
		font-size: 30upx;
		padding: 20px 15px;
		padding-bottom: 0;
	}

	.article-content {
		padding: 15px;
		overflow: hidden;
	}
</style>